<template>
	<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" width="55%">
		<el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px" :inline="true">
			<h3>客户资料</h3>
			<div class="title_ls"></div>
			<el-form-item v-for="item in cusFieldList" :key="item.colName" :prop="item.colName" :label="item.colValue">
				<el-input v-model="dataForm[item.colName]" v-if="item.colType === '0'" type="text"></el-input>
				<el-input v-model="dataForm[item.colName]" v-if="item.colType === '1'" type="tel"></el-input>
				<el-date-picker v-model="dataForm[item.colName]" v-if="item.colType === '2'" size="mini"  type="datetime" placeholder="选择日期时间" style="width: 180px;">
				</el-date-picker>
				<el-input v-model="dataForm[item.colName]" v-if="item.colType === '3'" type="email"></el-input>
				<el-input v-model="dataForm[item.colName]" v-if="item.colType === '4'" type="textarea"></el-input>
				<el-select v-model="dataForm[item.colName]" @change="selectDisposeCode" placeholder="请选择" v-if="item.colType === '5'">
					<el-option v-for="item in item.colExtend" :key="item.key" :label="item.value" :value="item.key">
					</el-option>
				</el-select>				
			</el-form-item>
			<!-- <el-row>
				<el-col :span="12">
					<el-form-item label="创建人:">
						<span>{{dataForm.cusCreateUsername}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="创建时间:" prop="CUS_CREATE_DATE" label-width="120px">
						<span>{{dataForm.cusCreateDate |formatDateTime }}</span>
					</el-form-item>
				</el-col>
			</el-row> -->
		</el-form>
		<!-- 客户资料子模块 -->
		<div class="subCfgList_title">
			<h3>子模块资料</h3>
			<div class="subCfgList_title_popover">
				<el-popover placement="top-start" trigger="hover" content="如需修改子模块客户资料，请双击对应数据进行修改">
					<span class="el-icon-question" slot="reference"></span>
				</el-popover>
			</div>
			<div class="title_ls"></div>
		</div>
		<div  v-for="(item1 ,idx1) in subCfgList" :key="idx1"> 
			<div style="display: inline-block;"><span style="font-size: 14px;color: #606266;">{{item1.name}}</span></div>
			&nbsp;&nbsp;&nbsp;
			<el-button type="primary" @click="addCustomerSubHandle(item1)" size="mini" round>新建</el-button>
			<el-table  :data="item1.subInfoList" style="width: 100%;"  @row-dblclick="(row,column,e)=>dbSelected(row,column,e,item1)"> 
				<el-table-column v-for="(value ,_key) in item1.subCfgMap" :key="_key" :prop="_key" header-align="center" align="center" :label="value">
					<template slot-scope="scope">
						<el-popover placement="left" :content="scope.row[_key]" trigger="hover">
							<span slot="reference">
				              <div style="height: 20px;">{{scope.row[_key]}}</div>
				            </span>
						</el-popover>
					</template>
				</el-table-column>
			</el-table>
		</br>
		</div>
			<h3>客户标签</h3>
			<div class="title_ls"></div>
			<customerTags :tagsList="tagsList" @childPostTags="parentGetTags"></customerTags>
		<span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      <sub-info-add ref="subInfoAdd" @refreshDataList="getCustomerInfo"></sub-info-add>
      <sub-info-update ref="subInfoUpdate" @refreshDataList="getCustomerInfo"></sub-info-update>
    </span>
	</el-dialog>
</template>

<script>
	import dateUtil from '@/utils/dateUtil'
	import SubInfoUpdate from './cc-customer-sub-info-update'
	import SubInfoAdd from './cc-customer-sub-info-add'
	import customerTags from './cc-customer-component-tags'
	export default {
		data() {
			return {
				visible: false,
				dataForm: {
					cusName: '',
					cusPhone: '',
					cusAddress: '',
					cusOpenId: '',
					cusVisitorId: '',
					cusVedioVisitorId:'',
					cusDesc: '',
					cusExt1: '',
					cusExt2: '',
					cusExt3: '',
					cusExt4: '',
					cusExt5: '',
					cusExt6: '',
					cusExt7: '',
					cusExt8: '',
					cusExt9: '',
					cusExt10: '',
					cusExt11: '',
					cusExt12: '',
					cusExt13: '',
					cusExt14: '',
					cusExt15: '',
					cusExt16: '',
					cusExt17: '',
					cusExt18: '',
					cusExt19: '',
					cusExt20: '',
					cusExt21: '',
					cusExt22: '',
					cusExt23: '',
					cusExt24: '',
					cusExt25: '',
				},
				id: '',
				cusFieldList: [],
				subCfgList:[],
				tagsList: [],//后台传过来的被选中的集合
				tagsCheckedList: [],//前端传给后台选中标签的id集合
			}
		},
		filters: {
			formatDateTime(timestamp) {
				return dateUtil.formatDateTime(timestamp)
			}
		},
		components: {
			SubInfoUpdate,
			SubInfoAdd,
			customerTags
		},
		created() {},
		methods: {
			init(id) {
				var that = this
				this.dataForm.id = id || 0;
				this.getCustomerInfo()
			},
			getCustomerInfo(){
				var that = this
				var id = this.dataForm.id 
				that.visible = true
				that.$nextTick(() => {
					this.$refs['dataForm'].resetFields()
					// 修改回显
					this.$http.post('/cc/customer/manage/detail', {
						id:id
					}).then(resp => {
						console.log("修改回显结果==>",resp.data)
						var cusFieldList = resp.data.cusFieldList
						for(var i = 0; i < cusFieldList.length; i++){
							if(cusFieldList[i].colType == '5' && cusFieldList[i].colExtend != ''){
								cusFieldList[i].colExtend =  JSON.parse(cusFieldList[i].colExtend);
							}
						}			
						that.cusFieldList = cusFieldList
						that.subCfgList = resp.data.subCfgList
						that.dataForm.cusName = resp.data.cusName
						that.dataForm.cusPhone = resp.data.cusPhone
						that.dataForm.cusAddress = resp.data.cusAddress
						// that.dataForm.cusCreateDate = resp.data.cusCreateDate
						that.dataForm.cusCreateUsername = resp.data.cusCreateUsername
						that.dataForm.cusOpenId = resp.data.cusOpenId
						that.dataForm.cusVisitorId = resp.data.cusVisitorId
						that.dataForm.cusDesc = resp.data.cusDesc
						that.dataForm.cusExt1 = resp.data.cusExt1
						that.dataForm.cusExt2 = resp.data.cusExt2
						that.dataForm.cusExt3 = resp.data.cusExt3
						that.dataForm.cusExt4 = resp.data.cusExt4
						that.dataForm.cusExt5 = resp.data.cusExt5
						that.dataForm.cusExt6 = resp.data.cusExt6
						that.dataForm.cusExt7 = resp.data.cusExt7
						that.dataForm.cusExt8 = resp.data.cusExt8
						that.dataForm.cusExt9 = resp.data.cusExt9
						that.dataForm.cusExt11 = resp.data.cusExt11
						that.dataForm.cusExt12 = resp.data.cusExt12
						that.dataForm.cusExt13 = resp.data.cusExt13
						that.dataForm.cusExt14 = resp.data.cusExt14
						that.dataForm.cusExt15 = resp.data.cusExt15
						that.dataForm.cusExt16 = resp.data.cusExt16
						that.dataForm.cusExt17 = resp.data.cusExt17
						that.dataForm.cusExt18 = resp.data.cusExt18
						that.dataForm.cusExt19 = resp.data.cusExt19
						that.dataForm.cusExt20 = resp.data.cusExt20
						that.dataForm.cusExt21 = resp.data.cusExt21
						that.dataForm.cusExt22 = resp.data.cusExt22
						that.dataForm.cusExt23 = resp.data.cusExt23
						that.dataForm.cusExt24 = resp.data.cusExt24
						that.dataForm.cusExt25 = resp.data.cusExt25
						that.dataForm.cusCreateUsername = resp.data.cusCreateUsername
						that.tagsList = resp.data.cusLabelList //后台传过来的被选中的集合
					})
				})
			},
			selectDisposeCode(){
		      this.$forceUpdate();
		    },
		    //新增子模块客户资料
			addCustomerSubHandle(val){
				this.$nextTick(() => {
					this.$refs.subInfoAdd.init(val)
				})
			},
		    //修改子模块客户资料
			dbSelected(row,column,e,item) {
				this.$nextTick(() => {
					this.$refs.subInfoUpdate.init(row,item)
				})
		    },
			// 表单提交
			dataFormSubmit() {
				var that = this
				that.$refs['dataForm'].validate((valid => {
					if(valid) {
						this.$prompt('请输入修改备注', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							inputPattern:  /\S/,
							inputErrorMessage: '请填写修改备注'
						}).then(({ value }) => {
							that.dataForm.updateDesc = value
							console.log("备注==>",that.dataForm.updateDesc)
							this.$http.post('/cc/customer/manage/update', {
								id: that.dataForm.id || undefined,
								cusName: that.dataForm.cusName,
								cusPhone: that.dataForm.cusPhone,
								cusAddress: that.dataForm.cusAddress,
								cusCreateUsername: that.dataForm.cusCreateUsername,
								cusOpenId: that.dataForm.cusOpenId,
								cusVisitorId: that.dataForm.cusVisitorId,
								cusDesc: that.dataForm.cusDesc,
								cusExt1: that.dataForm.cusExt1,
								cusExt2: that.dataForm.cusExt2,
								cusExt3: that.dataForm.cusExt3,
								cusExt4: that.dataForm.cusExt4,
								cusExt5: that.dataForm.cusExt5,
								cusExt6: that.dataForm.cusExt6,
								cusExt7: that.dataForm.cusExt7,
								cusExt8: that.dataForm.cusExt8,
								cusExt9: that.dataForm.cusExt9,
								cusExt10: that.dataForm.cusExt10,
								cusExt11: that.dataForm.cusExt11,
								cusExt12: that.dataForm.cusExt12,
								cusExt13: that.dataForm.cusExt13,
								cusExt14: that.dataForm.cusExt14,
								cusExt15: that.dataForm.cusExt15,
								cusExt16: that.dataForm.cusExt16,
								cusExt17: that.dataForm.cusExt17,
								cusExt18: that.dataForm.cusExt18,
								cusExt19: that.dataForm.cusExt19,
								cusExt20: that.dataForm.cusExt20,
								cusExt21: that.dataForm.cusExt21,
								cusExt22: that.dataForm.cusExt22,
								cusExt23: that.dataForm.cusExt23,
								cusExt24: that.dataForm.cusExt24,
								cusExt25: that.dataForm.cusExt25,
								updateDesc:that.dataForm.updateDesc,
								tagsCheckedList: that.tagsCheckedList
							}).then(resp => {
								that.$message({
									message: '操作成功',
									type: 'success',
									duration: 1500,
									onClose: () => {
										that.valid = false
										that.$emit('refreshDataList')
									}
								});
								that.visible = false
							})
			        }).catch(() => {});
						

					}
				}))
			},
			parentGetTags(getChildTagsList){
				this.tagsCheckedList = getChildTagsList;
			},

		}
	}
</script>

<style lang="scss">
	#el-popover-5179 {
		height: 240px！important;
	}
	
	.el-icon-question {
		font-size: 30px;
		margin-left: 60px;
		color: #409EFF;
	}
	
	.content>>>span {
		width: 100%;
	}
	.ampupbox .ampupbox-content .title {
		width: 100px;
		color: #fff;
		text-align: center;
	}
</style>
<style scoped="scoped">
	.el-input{
		width: 218px;
	}
	.el-select{
		width: 218px;
	}
	.subCfgList_title{
		position: relative;
	}
	.subCfgList_title_popover{
		position: absolute;
	    top: -3px;
	    left: 34px;
	}
</style>
